//5.事项TOP10--echarts
/*参数data:
var data = {
  name:['事项111', '事项1sd', '事项1sdfsd', '事项1水电费', '事项1电饭锅', '事项1暗室逢灯', '事项7', '事项8', '事项9', '事项10'],
  value:[600, 550, 520, 501, 486, 475, 470, 466, 420, 376]
};
*/

var MD05 = {
  f1:12*KO,
  f2:16*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    // if(this.md){
    //   this.md.setOption({
    //     series: [
    //       { data: data.zhu1 }, 
    //       { data: data.zhu2 }, 
    //       { data: data.zhu3 }
    //     ]
    //   })
    //   return false;
    // }else{
      this.myecharts(el,data)
    // }
  },
  myecharts: function(el,data) {   
    // 指定图表的配置项和数据
    var colorList = ['#04FEF9', '#77ED4D', '#48A3FF', '#FFE822', '#FF61D8', '#FCCF77', '#F12F77', '#5CCF27', '#FC5Fa7', '#ab5213'];
    option = {
        color: colorList,
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle:{
              fontSize:this.f2
            },
            formatter:'{b}<br><span style="color:#FFED27;">{c}</span>',
            padding:[5*KO,10*KO]
        },
        grid: {
          top: '15%',
          right: '10%',
          left: '10%',
          bottom: '30%'
        },
        xAxis: [{
          type: 'category',
          data: data.name,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          },
          axisLabel: {
            interval:0,      //强制显示所有刻度标签
            rotate:-30,       //标签旋转30度
            margin: 10*KO,
            color: '#e2e9ff',
            textStyle: {
              fontSize: this.f1
            },
          },
        }],
        yAxis: {
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
            textStyle: {
              fontSize: this.f1
            },
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }
        },
        series: [{
          type: 'pictorialBar',
          animation: true,
          animationDuration: 600,
          symbol: 'rect',
          symbolRepeat: true,
          symbolSize: [25*KO, 4*KO],
          symbolMargin: 1,
          barWidth: '60%',
          itemStyle: {
            normal: {
              color: function(params) {
                  return colorList[params.dataIndex]
              },
              // label: {
              //   show:true,
              //   color:'yellow',
              //   fontSize:this.f1
              // }
            }
          },
          label: {
            normal: {
              show: true,
              // lineHeight: 20,
              // width: 80,
              // height: 30,
              // backgroundColor: 'rgba(0,160,221,0)',
              // borderRadius: 200,
              position: [5*KO, -20*KO],
              textStyle: {
                fontSize: this.f1
              },
              // distance: 1,
              // formatter: [
              //     // '    {d|●}',
              //     ' {a|{c}}     \n',
              //     // '    {b|}'
              // ].join(','),
              // rich: {
              //     // d: {
              //     //     color: '#3CDDCF',
              //     // },
              //     a: {
              //         color: 'yellow',
              //         align: 'center',
              //     },
              //     // b: {
              //     //     width: 1,
              //     //     height: 30,
              //     //     borderWidth: 1,
              //     //     borderColor: '#234e6c',
              //     //     align: 'left'
              //     // },
              // }
            }
          },
          data: data.value
        }]
    };

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















